<!DOCTYPE html>  
  
<head>  
    <meta charset="utf-8">  
    <title>ECharts</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>  
  
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
    <div id="main" style="height:100%;width: 100%;"></div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript" src="cityMap.js"></script>
    <script type="text/javascript" src="china_data.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/examples/vendors/echarts/echarts.min.js"></script>  
    <script type="text/javascript" src="http://echarts.baidu.com/examples/vendors/echarts/map/js/china.js"></script>  
    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
				
				
				var convertData = function (data) {
				    var res = [];
				    for (var i = 0; i < data.length; i++) {
				        var geoCoord = cityMap[data[i].name];
				        if (geoCoord) {
				            res.push(geoCoord.concat(data[i].value));
				        }
				    }
				    return res;
				};
				
				var option = {
				    title: {
				        text: '2013年新募集资金地域分布',
                x: 'center',
                top:'15%',
                textStyle:{color:'#FFF',fontSize:22}
				    },
				    visualMap: {
				        min: 0,
				        max: 500,
				        splitNumber: 5,
				        inRange: {
				            color: ['#F7646C','#E17D35','#17D4EE'].reverse()
				        },
				        textStyle: {
				            color: '#fff',
				            fontSize:16
				        },
				        x: '5%',
                y: '65%',
				    },
            backgroundColor: '#0A0F23',
				    geo: {
				        map: 'china',
				        label: {
				            emphasis: {
				                show: false
				            }
				        },
				        zoom:1.2,
				        roam: false,
				        itemStyle: {
				            normal: {
				                areaColor: '#336C9C',
				                borderColor: '#111'
				            },
				            emphasis: {
				                areaColor: '#2a333d'
				            }
				        }
				    },
				    series: [{
				        name: 'AQI',
				        type: 'heatmap',
				        coordinateSystem: 'geo',
				        data: convertData(data)
				    }]
				};
    		myChart.setOption(option);
        var i = 1;
        setInterval(function(){
        	if(option){
        		var year = (i%5+2013)+"年新募集资金地域分布";
        		option.title.text = year;
        		var data1 = [];
        		for(var k = 0; k<data.length; k++){
        			data1[k] = {};
        			data1[k].name = data[k].name;
        			data1[k].value = Math.round(Math.random() * 250);
        		}
        		console.log(data1)
        		myChart.clear();
        		option.series = {
				        name: 'AQI',
				        type: 'heatmap',
				        coordinateSystem: 'geo',
				        data: convertData(data1)
				    }
        		myChart = echarts.init(document.getElementById('main'));
        		myChart.setOption(option);
        		i++;
        	}
        }, 2000);
    </script>  
</body>
</html>
